function paging() {
    // 获取最新文章的容器  
    var $warp = $('.warp')
    // 获取分页器的容器
    var $pager = $('.pager')
    console.log('$pager', $pager);
    // 给分页器的按钮注册点击事件
    $('.pager').on('click', $('.pager li a'), function (e) {
        console.log('点击了');
        //阻止按钮的跳转
        e.preventDefault()
        // 如果点击的不是a标签 就直接返回
        if (e.target.tagName !== 'A') return
        // 获取按钮 href属性里面的数据 
        var data = e.target.href.split('?')[1]
        // console.log(data);
        // 发送ajax请求
        $.ajax({
            url: '/api/post',
            data: data,
            beforeSend: function () {
                // 如果当前点击的按钮是选中的状态 那么这个请求就不发出
                var result = e.target.classList.contains('active')
                // console.log('result', result);
                return !result
            },
            success: function (data) {
                console.log('data', data); //返回的是查找到的posts
                // 最新文章的模板字符串
                var template = `
        <% posts.forEach((post,index) => { %>
            <a href="/post/<%= post._id?.toString() %>" class="latest-article__item animate__animated animate__bounceInLeft animate__delay-<%= index %>">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-4">
                        <div class="latest-article__img" style="background-image: url(<%= post.img || '/img/default.png' %>)"></div>
                        </div>
                        <div class="col-sm-8">
                        <div class="latest-article__content">
                        <div class="latest-article__title">
                        <%= post.title%>
                        </div>
                        <div class="latest-article__foot">
                        <span class="tag"><%= post.created%></span>
                        <span>浏览(<%= post.pv%>)</span>
                        <span>留言(<%= post.commentCount%>)</span>
                        </div>
                        </div>
                        </div>
                    </div>
                </div>
            </a>
        <% }) %>
            `
                // 拿到数据后 根据模板渲染 html解构，并把拿到的posts数据传给模板
                // 使用ejs插件 渲染ejs模板

                var html = ejs.render(template, {
                    posts: data.posts
                })
                // 用新的html结构替换掉原有的html结构
                $warp.html(html)


                // 拿到分页器按钮的模板
                var str = `
                    <% if (page !== 0) { %> 
                    <li><a href="?limit=5&page=<%= page-1 %>" class="glyphicon glyphicon-chevron-left control"></a></li>
                    <% } %>
                    <% for( let index = 0; index <= count /limit; index++ ) { %>
                    <li><a href="?limit=5&page=<%= index %>" class="<%= index === page? 'active' :'' %>"> <%= index+1 %></a></li>
                    <% } %>
                    <% if ( page < (count / limit)-1) { %>
                    <li><a href="?limit=5&page=<%= page+1 %>" class="glyphicon glyphicon-chevron-right control"></a></li>
                    <% } %>
                `
                var newPager = ejs.render(str, {
                    limit: data.limit,
                    count: data.count,
                    page: data.page
                })
                $pager.html(newPager)
                // 上面两行简写为：
                // $pager.html(ejs.render(str, ...data))
            }
        })
    })

}
paging()
